<template>
    <div id="level">
        <div class="pie-chart">
        </div>
    </div>
</template>

<script>
import { getStatisticsTwo, getStatisticsThree } from '@/api/reportStatistics/index.js'
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
export default {
    props: {
        time: {
            type: Object,
            default: {},
        },
        type: {
            type: String,
            default: '1',
        }
    },
    watch: {
        time(val) {
            this.getDeviceType()
        },
    },
    data() {
        return {
            data: [],
        }
    },
    mounted() {
        this.getDeviceType()
    },
    methods: {
        init(data, dom) {
            let option = {
                title: {
                    text: this.type == '1' ? '国内震级统计' : '国外震级统计',
                    textStyle: {
                        color: '#fff',}
                },
                tooltip: {
                    trigger: 'item',
                    confine: true,
                    formatter: (params) => {
                        return `<div>${params.marker}${params.data.name}:<span style="display: inline-block;width: 40px;text-align: center;">${params.data.value}</span> <span>(${params.percent}%)</span></div>`;
                    },
                },
                legend: {
                    itemWidth: 10,
                    itemHeight: 10,
                    orient: 'vertical',
                    icon: 'circle',
                    top: '20%',
                    right: '10%',
                    itemGap: 20,
                    formatter: (name) => {
                        let total = 0;
                        let value = data.filter((item) => item.name == name)[0];
                        data.forEach((item) => {
                            total += item.value;
                        });
                        let percent = total == 0 ? 0 : (Number(value.value) / Number(total)) * 100;
                        return `{title|${name}}{value|${value.value}}{percent|(${percent.toFixed(
                            2
                        )}%)}`;
                    },
                    data,
                    textStyle: {
                        padding: [2, 0, 0, 0],
                        color: '#fff',
                        rich: {
                            title: {
                                width: 60
                            },
                            value: {
                                width: 30,
                                align: 'center',
                            },
                            percent: {
                                width: 60,
                                align: 'left',
                            },
                        },
                    },
                },
                series: [
                    {
                        name: this.type == '1' ? '国内' : '国外',
                        type: 'pie',
                        center: ['35%', '55%'],
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: true,
                        // itemStyle: { borderColor: '#fff', borderWidth: 2 },
                        color: [
                            '#808080', '#1890ff', '#fadb14', '#faad14', '#f5222d'
                        ],
                        label: {
                            show: true,
                            icon: 'circle',
                            padding: [10, 0],
                            // alignTo: 'labelLine', // ! 文字对齐方式
                            formatter: '{b}\n{c}个 {d}%',
                        },
                        data
                    },
                ],
            };
            dom.setOption(option);
            addEventListener('resize', function () {
                dom.resize();
            });
        },
        async getDeviceType() {
            if (this.type == '1') {
                const res = await getStatisticsTwo(this.time);
                if (res.code == 200) {
                    let data = [];
                    // res.data.forEach((item) => {
                    //     data.push({
                    //         name: this.formatLevel(item.level),
                    //         value:item.quantity,
                    //     });
                    // });
                    for (let index = 1; index <= 5; index++) {
                        let _data = res.data.filter(item => {
                            return item.level == index
                        })
                        if (_data.length > 0) {
                            this.total += _data[0].quantity
                            data.push({
                                name: this.formatLevel(_data[0].level),
                                value: _data[0].quantity,
                            })
                        } else {
                            data.push({
                                name: this.formatLevel(index + ''),
                                value: 0,
                            })
                        }
                    }
                    let dom = echarts.init(document.getElementsByClassName('pie-chart')[0]);

                    this.init(data, dom);
                }
                return
            }
            const res = await getStatisticsThree(this.time);
            if (res.code == 200) {
                let data = [];
                for (let index = 1; index <= 5; index++) {
                    let _data = res.data.filter(item => {
                        return item.level == index
                    })
                    if (_data.length > 0) {
                        this.total += _data[0].quantity
                        data.push({
                            name: this.formatLevel(_data[0].level),
                            value: _data[0].quantity,
                        })
                    } else {
                        data.push({
                            name: this.formatLevel(index + ''),
                            value: 0,
                        })
                    }
                }
                let dom = echarts.init(document.getElementsByClassName('pie-chart')[1]);
                this.init(data, dom);
            }
        },
        formatLevel(val) {
            switch (val) {
                case '1':
                    return '0~2.9级'
                case '2':
                    return '3.0~3.9级'
                case '3':
                    return '4.0~4.9级'
                case '4':
                    return '5.0~5.9级'
                case '5':
                    return '6.0~以上'
                default:
                    break;
            }
        }
    }
}
</script>

<style lang='scss' scoped>
#level {
    width: 100%;
    // padding: 10px 20px;
    // background: #ffffff;

    height: 200px;
    // margin-right: 20px;
    box-sizing: border-box;
    // overflow: hidden;
    // box-shadow: 1px 0px 10px 14px rgba(228, 230, 225, .6);
    // -webkit-box-shadow: 1px 0px 10px 14px rgba(228, 230, 225, .6);

    .pie-chart {
        width: 100%;
        height: 100%;
    }
}
</style>